<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>聊天功能测试</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container mt-5">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card">
            <div class="card-header">
              <h4>AI聊天功能测试</h4>
            </div>
            <div class="card-body">
              <div class="alert alert-info">
                <h5>测试说明：</h5>
                <p>此页面用于测试AI聊天功能是否正常工作，包括空值处理。</p>
              </div>

              <div class="mb-3">
                <label for="testInterviewId" class="form-label"
                  >面试ID（测试用）</label
                >
                <input
                  type="number"
                  class="form-control"
                  id="testInterviewId"
                  value="1"
                  placeholder="输入面试ID"
                />
              </div>

              <div class="mb-3">
                <label for="testMessage" class="form-label">测试消息</label>
                <textarea
                  class="form-control"
                  id="testMessage"
                  rows="3"
                  placeholder="输入测试消息"
                ></textarea>
              </div>

              <div class="mb-3">
                <button id="testSendBtn" class="btn btn-primary">
                  发送测试消息
                </button>
                <button id="testHistoryBtn" class="btn btn-secondary ms-2">
                  获取聊天历史
                </button>
              </div>

              <div id="testResult" class="mt-3" style="display: none">
                <h5>测试结果：</h5>
                <div id="resultContent" class="alert"></div>
              </div>

              <div class="mt-4">
                <h5>常见问题解决方案：</h5>
                <div class="accordion" id="accordionExample">
                  <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                      <button
                        class="accordion-button collapsed"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseOne"
                      >
                        空指针异常
                      </button>
                    </h2>
                    <div
                      id="collapseOne"
                      class="accordion-collapse collapse"
                      data-bs-parent="#accordionExample"
                    >
                      <div class="accordion-body">
                        <p>如果遇到空指针异常，可能的原因：</p>
                        <ol>
                          <li>面试ID不存在或为空</li>
                          <li>消息内容为空</li>
                          <li>用户信息不存在</li>
                          <li>面试记录不存在</li>
                        </ol>
                        <p>
                          现在这些问题都已经修复，系统会返回友好的错误信息。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                      <button
                        class="accordion-button collapsed"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseTwo"
                      >
                        AI服务问题
                      </button>
                    </h2>
                    <div
                      id="collapseTwo"
                      class="accordion-collapse collapse"
                      data-bs-parent="#accordionExample"
                    >
                      <div class="accordion-body">
                        <p>如果AI服务无法正常工作：</p>
                        <ol>
                          <li>检查API密钥配置</li>
                          <li>确认网络连接正常</li>
                          <li>查看服务器日志</li>
                          <li>使用AI服务测试页面进行诊断</li>
                        </ol>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      document
        .getElementById("testSendBtn")
        .addEventListener("click", function () {
          const interviewId = document.getElementById("testInterviewId").value;
          const message = document.getElementById("testMessage").value;
          const resultDiv = document.getElementById("testResult");
          const resultContent = document.getElementById("resultContent");

          if (!interviewId) {
            showResult("error", "请输入面试ID");
            return;
          }

          if (!message.trim()) {
            showResult("error", "请输入测试消息");
            return;
          }

          fetch("/api/chat/send", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              interviewId: parseInt(interviewId),
              message: message.trim(),
            }),
          })
            .then((response) => response.json())
            .then((data) => {
              if (data.success) {
                showResult(
                  "success",
                  "测试成功！AI回复：" + (data.aiResponse || "无回复")
                );
              } else {
                showResult("error", "测试失败：" + (data.error || "未知错误"));
              }
            })
            .catch((error) => {
              showResult("error", "网络错误：" + error.message);
            });
        });

      document
        .getElementById("testHistoryBtn")
        .addEventListener("click", function () {
          const interviewId = document.getElementById("testInterviewId").value;
          const resultDiv = document.getElementById("testResult");
          const resultContent = document.getElementById("resultContent");

          if (!interviewId) {
            showResult("error", "请输入面试ID");
            return;
          }

          fetch("/api/chat/history/" + interviewId)
            .then((response) => response.json())
            .then((data) => {
              if (data.success) {
                showResult(
                  "success",
                  "获取聊天历史成功！消息数量：" +
                    (data.messages ? data.messages.length : 0)
                );
              } else {
                showResult(
                  "error",
                  "获取聊天历史失败：" + (data.error || "未知错误")
                );
              }
            })
            .catch((error) => {
              showResult("error", "网络错误：" + error.message);
            });
        });

      function showResult(type, message) {
        const resultDiv = document.getElementById("testResult");
        const resultContent = document.getElementById("resultContent");

        resultDiv.style.display = "block";
        resultContent.className =
          "alert alert-" + (type === "success" ? "success" : "danger");
        resultContent.textContent = message;
      }
    </script>
  </body>
</html>
